<template>
  <div class="app flex-row align-items-center">
    <div class="container">
      <b-row class="justify-content-center">
        <b-col md="5">
          <b-card-group>
            <b-card no-body class="p-4">
              <b-card-body>
                <h2>VueTP-User登录</h2>
                <p class="text-muted">请进交流群<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=7afbd2d51ebfad68b356f5c2f33f9ed201eabffaf6598a1b8b40b7e647a26efa">22765697</a>索要演示账号密码</p>
                <div class="input-group mb-3">
                  <span class="input-group-text"><i class="icon-user"></i></span>
                  <input type="text" v-model="items.username" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="input-group mb-3">
                  <span class="input-group-text"><i class="icon-lock"></i></span>
                  <input type="password" v-model="items.pwd" class="form-control" placeholder="请输入密码">
                </div>
                <div class="input-group mb-3">
                  <span class="input-group-text">验</span>
                  <input type="text" class="form-control" v-model="items.imgcode" placeholder="验证码">
                  <img :src="imgsrc" alt="code" width="30%" height="35px" @click="imgReload">
                </div>
                <b-row>
                  <b-col cols="4">
                    <b-button variant="primary" class="px-4" @click="login" @keyup.enter="login">登录</b-button>
                  </b-col>
                  <b-col cols="8" class="text-right">
                    <b-button variant="link" class="px-0" @click="goAdmin">体验Admin端</b-button>
                  </b-col>
                </b-row>
              </b-card-body>
            </b-card>
          </b-card-group>
        </b-col>
      </b-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      items: {
        username: '',
        pwd: '',
        imgcode: ''
      },
      imgsrc: ''
    }
  },
  methods: {
    login () {
      if (this.chickForm() === true) {
        if (this.items.imgcode === '') {
          this.$Message.error({
            content: '请填写验证码'
          })
          return false
        }
        this.$post('/api/user/index/login', this.items).then((res) => {
          if (res) {
            this.$Message.success({
              content: '登录成功',
              onClose: () => {
                localStorage.setItem('user_info', JSON.stringify(res.data))
                if (this.$route.query.redirect) {
                  let redirect = this.$route.query.redirect
                  this.$router.push(redirect)
                } else {
                  this.$router.push('/user')
                }
              }
            })
          }
        })
      } else {
        this.$Message.error({
          content: '请填写用户名密码'
        })
      }
    },
    chickForm () {
      if (this.items.username === '' || this.items.pwd === '') {
        return false
      }
      return true
    },
    imgReload () {
      this.imgsrc = ''
      this.imgsrc = window.HOST + '/captcha.html' + '?v=' + Math.random()
    },
    goAdmin () {
      this.$router.push('/admin/login')
    }
  },
  created () {
    this.imgReload()
  }
}
</script>
